<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
    <title>客户端管理-应用授权管理</title>
</head>
<body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
            <form id="search-form">
                <div class="select-list row">
                    <div class="col-md-4 col-sm-4 col-xs-6">
                        <div class="control-label">
                            租户名称：
                        </div>
                        <div class="col-md-8 col-sm-8 col-xs-8">
                            <input class="form-control" type="text" name="Q_clientName_S_LK"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-12 control-label div-btn">
                        <a class="btn btn-success btn-rounded btn-sm" onclick="$.table.search('bootstrap-table', 'search-form')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-default btn-rounded btn-sm" onclick="$.form.reset('search-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                    </div>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="add()" th:classappend="${@config.hasPermission('client:oauth:add')}">
                <i class="fa fa-plus"></i> 新增
            </a>
            <a class="btn btn-warning btn-edit disabled" onclick="edit()" th:classappend="${@config.hasPermission('client:oauth:edit')}">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger btn-del disabled" onclick="del()" th:classappend="${@config.hasPermission('client:oauth:delete')}">
                <i class="fa fa-remove"></i> 删除
            </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<div th:replace="/common/include :: footer"></div>

<script th:inline="javascript">
    var addFlag = [[${@config.hasPermission('client:oauth:add')}]];
    var editFlag = [[${@config.hasPermission('client:oauth:edit')}]];
    var removeFlag = [[${@config.hasPermission('client:oauth:delete')}]];
    var prefix = ctx + 'api/oauth';

    $(function() {

        var options = {
            code: 'clientId',
            url: prefix + '/table',
            sortName: '',
            sortOrder: 'asc',
            search: false,
            showExport: false,
            pagination: false,
            columns: [{
                field: 'rowState',
                checkbox: true
            },
                {
                    field: 'clientName',
                    title: '租户名称',
                    sortable: true
                },
                {
                    field: 'resourceIds',
                    title: '资源限定串',
                    formatter: function(value, row, index) {
                        return $.common.render.toggleBadge(value, ',');
                    }
                },
                {
                    field: 'authorizedGrantTypes',
                    title: '授权方式',
                    formatter: function(value, row, index) {
                        return $.common.render.toggleBadge(value, ',');
                    }
                },
                {
                    field: 'clientSecretStr',
                    title: '密钥',
                    formatter: function(value, row, index) {
                        return $.common.render.togglePassword(value);
                    }
                },
                {
                    field: 'scope',
                    title: '范围',
                    formatter: function(value, row, index) {
                        return $.common.render.toggleBadge(value, ',');
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    width: '150px',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn-sm btn-success ' + editFlag + '" href="#" onclick="edit(\'' + row.clientId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn-sm btn-danger ' + removeFlag + '" href="#" onclick="del(\'' + row.clientId + '\')"><i class="fa fa-remove"></i>删除</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init('bootstrap-table', options);
    });

    function add() {
        var title = '新增租户授权';
        var url = ctx + 'api/client/oauth/edit';

        $.operate.edit({
            title: title,
            content: url,
            width: 800,
            height: 520,
            shadeClose: true,
            _index: window.name,
            _callback: 'refresh'
        });
    }

    function edit(id) {
        var title = '编辑租户授权';
        var url = ctx + 'api/client/oauth/edit';
        if (!id) {
            url = url + '?id={id}';
            $.operate.editSelect({
                type: 'table',
                title: title,
                content: url,
                width: 800,
                height: 520,
                shadeClose: true,
                _index: window.name,
                _callback: 'refresh'
            }, false);
            return;
        }

        url = url + '?id=' +id;
        $.operate.edit({
            title: title,
            content: url,
            width: 800,
            height: 520,
            shadeClose: true,
            _index: window.name,
            _callback: 'refresh'
        });
    }

    function del(id) {
        var url = prefix + '/delete';
        if (!id) {
            $.operate.removeSelect('bootstrap-table', url, '确定删除选中的数据吗？', 'table', 'refresh');
            return;
        }
        $.operate.remove(url, id, null, 'refresh');
    }

    function refresh() {
        $.table.refresh();
    }

</script>
</body>
</html>
